<extend name="Public:base" />
<block name="Controller">Styles</block>
<block name="Main">
    <div class="col-md-10 main padding">
        <h2>样式设置</h2>
        <hr />
        <form name="form" data-ajax method="post" action="{:U('Admin/AppInfo/update')}" class="form form-horizontal form-validate">
            <legend>全局设置</legend>
            <div class="form-group form-icon">
                <label for="ipt-background-image" class="col-sm-2 form-label">背景：</label>
                <div class="col-sm-7">
                    <a data-fancybox-type="iframe" class="button small fancybox" href="{:U('Admin/FileManager/index')}#background-image"><i class="icon-file-image-o"></i></a>
                    
                    <input class="form-field webupload" class="webupload" type="text" id="ipt-background-image" name="background-image" value="{$vo.background-image}">
                </div>
                <div class="col-sm-3">
                    <a href="#" data-colorPicker ><i class="icon-tachometer"></i></a>
                    
                    <input class="form-field iColorPicker" type="text" name="background-color" value="{$vo.background-color}">

                    
                </div>
            </div>
            <div class="form-group  margin-bottom">
                <label for="ipt-logo" class="col-sm-2 form-label">背景图片设置：</label>
                <div class="col-md-3">
                    <select data="{$vo.background-repeat}" name="background-repeat">
                        <option value="no-repeat">不平铺</option>
                        <option value="repeat">完全平铺</option>
                        <option value="repeat-y">上下平铺</option>
                        <option value="repeat-x">左右平铺</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select  data="{$vo.background-position}" name="background-position">
                        <option value="">默认</option>
                        <option value="left">居左</option>
                        <option value="center">居中</option>
                        <option value="right">居右</option>
                    </select>
                </div>
                <div class="col-md-4 clearfix">
                    <select class="form-field" data="{$vo.background-attachment}" name="background-attachment">
                        <option value="">请选择</option>
                        <option value="fixed">固定</option>
                        <option value="repeat">浮动</option>
                    </select>
                </div>
            </div>
            <div class="form-group form-icon">
                <label for="ipt-intro" class="col-sm-2 form-label">文本颜色：</label>
                <div class="col-sm-10">

                    <a href="#" data-colorPicker ><i class="icon-tachometer"></i></a>
                    <input id="font-color" type="text" class="form-field color iColorPicker" name="font-color" value="{$vo.font-color}">
                </div>
            </div>

            <div class="form-group ">
                <label for="ipt-intro" class="col-sm-2 form-label">透明：</label>
                
                <div class="col-md-10 clearfix">
                    <select data="{$vo.body-opacity}" name="body-opacity">
                        <option value="1">不透明</option>
                        <option value="0.9">透明度0.9</option>
                        <option value="0.8">透明度0.8</option>
                        <option value="0.7">透明度0.7</option>
                        <option value="0.6">透明度0.6</option>
                        <option value="0.6">半透明</option>
                    </select>
                </div>
            </div>

            <legend>首页设置</legend>
            <div class="form-group form-icon">
                <label for="ipt-name" class="col-sm-2 form-label">首页背景图片：</label>
                <div class="col-sm-7">
                    <a data-fancybox-type="iframe" class="button small fancybox" href="{:U('Admin/FileManager/index')}#index-background-image"><i class="icon-file-image-o"></i></a>
                    
                    <input class="form-field webupload" class="webupload" type="text" id="ipt-background-image" name="index-background-image" value="{$vo.index-background-image}">
                </div>
                <div class="col-sm-3">
                    <a href="#" data-colorPicker ><i class="icon-tachometer"></i></a>
                    
                    <input class="form-field webupload" class="webupload" type="text" id="ipt-background-color" name="index-background-color" value="{$vo.index-background-color}">
                </div>
            </div>
            <legend>其他设置</legend>
            <div class="form-group form-icon">
                <label for="ipt-desc" class="col-sm-2 form-label">标题文字颜色：</label>
                <div class="col-sm-10">
                   <a href="#" data-colorPicker ><i class="icon-tachometer"></i></a>
                    
                    <input class="form-field webupload" class="webupload" type="text" id="ipt-background-color" name="title-font-color" value="{$vo.title-font-color}">
                </div>
            </div>
            <div class="form-group form-icon">
                <label for="ipt-contact" class="col-sm-2 form-label">标题背景颜色：</label>
                <div class="col-sm-10">
                    <a href="#" data-colorPicker ><i class="icon-tachometer"></i></a>
                    
                    <input class="form-field iColorPicker" type="text" id="ipt-background-color" name="title-background-color" value="{$vo.title-background-color}">
                </div>
            </div>

            <div class="form-group form-icon">
                <label for="ipt-contact" class="col-sm-2 form-label">菜单背景色：</label>
                <div class="col-sm-10">
                    <a href="#" data-colorPicker ><i class="icon-tachometer"></i></a>
                    
                    <input class="form-field iColorPicker" type="text" id="ipt-background-color" name="menu-background-color" value="{$vo.menu-background-color}">
                </div>
            </div>

            <div class="form-group form-icon">
                <label for="ipt-contact" class="col-sm-2 form-label">菜单文字颜色：</label>
                <div class="col-sm-10">
                    <a href="#" data-colorPicker ><i class="icon-tachometer"></i></a>
                    
                    <input class="form-field iColorPicker" type="text" id="ipt-background-color" name="menu-font-color" value="{$vo.menu-font-color}">
                </div>
            </div>

            <div class="form-group form-icon">
                <label for="ipt-contact" class="col-sm-2 form-label">侧边栏背景色：</label>
                <div class="col-sm-10">
                    <a href="#" data-colorPicker ><i class="icon-tachometer"></i></a>
                    
                    <input class="form-field iColorPicker" type="text" id="ipt-background-color" name="aside-background-color" value="{$vo.aside-background-color}">
                </div>
            </div>

            <div class="form-group form-icon">
                <label for="ipt-contact" class="col-sm-2 form-label">侧边栏文字颜色：</label>
                <div class="col-sm-10">
                    <a href="#" data-colorPicker ><i class="icon-tachometer"></i></a>
                    
                    <input class="form-field iColorPicker" type="text" id="ipt-background-color" name="aside-font-color" value="{$vo.aside-font-color}">
                </div>
            </div>

            <div class="form-group form-icon">
                <label for="ipt-contact" class="col-sm-2 form-label">底部导航背景色：</label>
                <div class="col-sm-10">
                    <a href="#" data-colorPicker ><i class="icon-tachometer"></i></a>
                    
                    <input class="form-field iColorPicker" type="text" id="ipt-background-color" name="nav-background-color" value="{$vo.nav-background-color}">
                </div>
            </div>

            <div class="form-group form-icon">
                <label for="ipt-contact" class="col-sm-2 form-label">底部导航文字颜色：</label>
                <div class="col-sm-10">
                    <a href="#" data-colorPicker ><i class="icon-tachometer"></i></a>
                    
                    <input class="form-field iColorPicker" type="text" id="ipt-background-color" name="nav-font-color" value="{$vo.nav-font-color}">
                </div>
            </div>
            

            <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">提交保存</button>
            </div>
          </div>
        </form>
    </div>

<load href="Public/fancyBox/jquery.fancybox.css" />
<load href="__PUBLIC__/iColorPicker.js" />
<script type="text/javascript">
avalon.config({
    debug:false,
})
require("nprogress/nprogress,jquery,fancyBox/jquery.fancybox", function(nprogress,$,app) {

$(function(){
    $("[data-colorPicker]").each(function(i) {
        var iptName = $(this).next('input').attr('name');
        $('[name='+iptName+']').css('backgroundColor',$('[name='+iptName+']').val());
        
        var obj = $(this);
        $(this).on('click',function(){
            iColorShow(iptName,obj);
        })
    })
})

    $('select[data]').each(function(){
        var v = $(this).attr('data');
        $(this).val(v);
    })
    $('form').on('submit',function(e){
        e.preventDefault();
        nprogress.start();
        var pars = $(this).find('input,select').serialize();
        var url = "{:U('Admin/Styles/save')}";
        $.post(url,pars,function(resq){
            nprogress.done();
            location.reload();
        })
    })
    $(".fancybox").fancybox({
        maxWidth    : 800,
        maxHeight   : 900,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });


    var Styles = avalon.define('Styles', function(vm) {
        //
    })
    avalon.scan();
    iColorPicker();
}) 

</script>    
</block>